<template>
  <rm-layout-left splitcolor="white" movingcolor="#00ff00" :splitwidth=0 :fixsize=0 :minfixsize=80 :canDrag=false>
      <rm-layout-top splitcolor="white" :splitwidth=5 :fixsize=70 :canDrag=false>
          <template v-slot:fix>
              <div style="height:70px;border:1px solid #CCC">
                  <table style="font-size:12px;white-space: nowrap;">
                      <tr>

                          <td style="width:50px" align="right">所属组</td>
                          <td>
                              <rm-ddl-common @change="labgroupChange" datatype="labgroup" dataname="检验工作组" v-model="searchObj.labgroupid" width="120px"></rm-ddl-common>
                          </td>
                          <td style="width:50px" align="right">计划名称</td>
                          <td>
                              <!-- <el-select v-model="searchObj.planname" clearable @change="btnQuery">
                                  <el-option v-for="(item,index) in plannameOption" :key="index" :value="item.value" :label="item.label"></el-option>
                              </el-select> -->
                              <el-autocomplete v-model="searchObj.planname" ref="input3" @keyup.enter.native="btnQuery" @select="searchhandleSelect" placeholder="计划名称" :fetch-suggestions="querySearchAsync" style="width:120px" clearable></el-autocomplete>
                          </td>
                          <td style="width:50px" align="right">设备名称</td>
                          <td>
                              <rm-ddl-common datatype="off_device" dataname="设备" v-model="searchObj.deviceid" width="120px" @change="searchdeviceidChange"></rm-ddl-common>
                          </td>

                          <td align="right" style="width:100px">
                              <el-checkbox true-label="1" false-label="0" v-model="searchObj.chkshowall" @change="btnQuery">显示全部</el-checkbox>
                          </td>
                      </tr>
                  </table>

                  <div class="top-deal">
                      <el-form :disabled="devorgid==0">
                          <el-button @click="btnQuery" icon="el-icon-search" type="primary">查询</el-button>
                          <el-button @click="btnDefaultVal" icon="el-icon-thumb">默认值</el-button>
                          <el-button @click="btnHandExe">执行计划</el-button>
                          <el-button @click="btnCancel" icon="el-icon-close">取消</el-button>
                      </el-form>

                  </div>
              </div>
          </template>
          <rm-layout-right splitcolor="white" movingcolor="#0000ff" :splitwidth=5 :fixsize=800>
              <template v-slot:fix>
                  <div style="height:100%">
                      <rm-handexe :tableobj="tableobj" :formobj="formobj" :key="plandetkey" :showbtn="false" ref="refhandexe" @change="handexeChange" :devmaintobj="devmaintobj"></rm-handexe>
                  </div>
              </template>
              <div style="height:100%;width:100%;background-color:#ddccbb;">
                  <vxe-table :data.sync="showLXTableData" :loading="bLoading" :keyboard-local-config="keyLocalConfig" :row-class-name="lRowClassName" :select-config="selectConfig" :sort-config="{trigger: 'cell'}" :edit-config="{trigger: 'click',mode: 'cell',showStatus: true,showIcon: false,}" @current-change="CurrentChangeEvent" border fit height="auto" header-align="center" highlight-current-row highlight-hover-row highlight-hover-column ref="lxTable" resizable size="mini" stripe show-header-overflow="tooltip" show-overflow="tooltip">
                      <!-- <vxe-table-column field="devmaintplanid" title="维护计划ID" width="80" align="center" sortable></vxe-table-column>
                      <vxe-table-column field="devicename" title="设备" width="100" align="center" sortable></vxe-table-column>
                      <vxe-table-column field="planname" title="计划名称" width="80" header-align="center" sortable></vxe-table-column>
                      <vxe-table-column field="plantypename" title="计划类别" width="80" sortable></vxe-table-column>
                      <vxe-table-column field="validflagname" title="有效标志" width="70" align="center" sortable></vxe-table-column>
                      <vxe-table-column field="periodnum" title="周期数值" width="60" align="right" header-align="center"></vxe-table-column>
                      <vxe-table-column field="periodunitname" title="周期单位" width="60" sortable></vxe-table-column>
                      <vxe-table-column field="firstruntime" title="首次运行时间" width="120" header-align="center" align="left" sortable :formatter="['toDateString', 'yyyy-MM-dd HH:mm:ss']"></vxe-table-column>
                      <vxe-table-column field="nextruntime" title="下一次运行时间" width="120" align="center" sortable :formatter="['toDateString', 'yyyy-MM-dd HH:mm:ss']"></vxe-table-column>
                      <vxe-table-column field="lastruntime" title="最后执行时间" width="120" align="center" sortable :formatter="['toDateString', 'yyyy-MM-dd HH:mm:ss']"></vxe-table-column>
                      <vxe-table-column field="devicemodel" title="设备型号" width="70" align="center" sortable></vxe-table-column>
                      <vxe-table-column field="description" title="备注" width="100" header-align="center" align="left" sortable></vxe-table-column>
                      <vxe-table-column field="createusername" title="创建人" width="60" header-align="center" align="left" sortable></vxe-table-column>
                      <vxe-table-column field="createdate" title="创建时间" width="90" align="center" sortable :formatter="['toDateString', 'yyyy-MM-dd']"></vxe-table-column> -->

                      <vxe-table-column field="devicename" title="所属设备" width="120"></vxe-table-column>
                      <vxe-table-column field="planname" title="计划名称" width="100"></vxe-table-column>
                      <vxe-table-column field="plantypename" title="计划类别" width="60"></vxe-table-column>
                      <vxe-table-column field="periodnum" title="执行" width="50" align="center"></vxe-table-column>
                      <vxe-table-column field="periodunitname" title="间隔" width="50" align="center"></vxe-table-column>
                      <vxe-table-column field="nextruntime" title="下一次运行时间" width="120"></vxe-table-column>
                      <vxe-table-column field="lastruntime" title="最后执行时间" width="120"></vxe-table-column>
                      <vxe-table-column field="description" title="备注" width="150"></vxe-table-column>
                      <vxe-table-column field="firstruntime" title="首次执行时间" width="120"></vxe-table-column>
                      <vxe-table-column field="devmaintplanid" title="维护计划ID" width="80" align="center"></vxe-table-column>
                      <vxe-table-column field="overtimeflag" title="超时标志" width="60" align="center">
                          <template v-slot="{row}">{{row.overtimeflag=="1"?"待执行":""}}</template>
                      </vxe-table-column>
                  </vxe-table>
              </div>
          </rm-layout-right>
      </rm-layout-top>
  </rm-layout-left>
</template>

<script type="text/javascript">
import XEUtils from "xe-utils";
export default {
  name: "DEV121",
  data() {
      return {
          searchObj: {},
          selectConfig: { tigger: "row" },
          bLoading: false,
          keyLocalConfig: {
              isDel: true,
              isTab: true,
              isEdit: true,
              isArrow: true,
          },
          showLXTableData: [],
          selrow: "",
          plannameOption: [
              { value: "日保养", label: "日保养" },
              { value: "月保养", label: "月保养" },
              { value: "周保养", label: "周保养" },
          ],
          chkshowall: "0",
          formobj: {},
          tableobj: [],
          devmaintobj:{},
          plandetkey: 0,
          devorgid: 0,
          LogLoading: false,
          isMantuser: true,
      };
  },
  created() {
      this.initdata();
      this.initPage();
  },
  computed: {
      list() {
          let filterName = this.chkshowall;
          if (filterName == "0") {
              let rest = this.showLXTableData.filter((item) => item.overtimeflag == "1");
              return rest;
          } else {
              return this.showLXTableData;
          }
      },
  },
  methods: {
      initdata() {
          this.$tool
              .request({
                  url: "DEV/DEV1/DEV121",
                  method: "post",
                  data: {
                      action: "initdata",
                  },
              })
              .then((res) => {
                  this.employeeOption = res.data;
                  this.devorgid = res.devorgid;
                  if (res.devorgid == 0) {
                      this.$alert("当前登录者没有设置所属设备中心,请设置后再操作！", "提示");
                  }
              })
              .catch((e) => {
                  this.$alert("出错" + e, "出错");
              });
      },
      querySearchAsync(queryString, cb) {
          clearTimeout(this.timeout);
          this.timeout = setTimeout(() => {
              cb(this.plannameOption);
          }, 100);
      },
      //检验组改变
      labgroupChange(code, name) {
          this.searchObj.labgroupid = code;
          this.initPage();
      },
      //设备名称改变
      searchdeviceidChange(code, name) {
          this.btnQuery();
      },
      initPage() {
          this.bLoading = true;
          this.$tool
              .request({
                  url: "DEV/DEV1/DEV121",
                  method: "post",
                  timeout: 600000,
                  data: {
                      action: "initPage",
                      ...this.searchObj,
                  },
              })
              .then((res) => {
                  this.showLXTableData = res.data;
                  if (res.data.length > 0) {
                      this.$refs.lxTable.setCurrentRow(res.data[0]);
                      this.selrow = res.data[0];
                      this.queryRight(res.data[0]);
                  } else {
                      this.$refs.lxTable.setCurrentRow(null);
                      this.tableobj = [];
                      this.formobj = {};
                      this.devmaintobj = {};
                      this.plandetkey++;
                  }
                  this.bLoading = false;
              })
              .catch((e) => {
                  this.$alert(e, "error");
                  this.bLoading = false;
              });
      }, //行选中切换
      CurrentChangeEvent({ row, column }) {
          if (this.changeflag) {
              this.$refs.lxTable.setCurrentRow(this.selrow);
              return false;
          } else {
              this.queryRight(row);
              this.selrow = row;
          }
      }, //查询右边数据
      queryRight(row) {
          let that = this;
          if (!!row) {
              that.$tool
                  .request({
                      url: "DEV/DEV1/DEV121",
                      method: "post",
                      timeout: 600000,
                      data: {
                          action: "queryRight",
                          devmaintplanid: row.devmaintplanid,
                      },
                  })
                  .then((res) => {
                      that.tableobj = res.tabledata;
                      that.formobj = { planname: row.planname + "(" + row.devicename + ")", description: row.description, maintuser: that.$tool.getSession(that.$tool.loginuserno), maintdt: that.$pub.InitDateTime(), devmaintplanid: row.devmaintplanid };
                      this.devmaintobj = res.devmaint;
                      that.plandetkey++;
                  })
                  .catch((e) => {
                      that.$alert(e, "error");
                  });
          } else {
              that.formobj = {};
              that.tableobj = [];
          }
      },
      //查询
      btnQuery() {
          this.initPage();
      },
      //取消
      btnCancel() {
          this.$confirm("您确定要取消这次改动吗？", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning",
          })
              .then(() => {
                  this.queryRight(this.selrow);
              })
              .catch((e) => {});
      },
      searchhandleSelect(item) {
          this.searchObj.planname = item.value;
      },
      lRowClassName({ row }) {
          if (row.overtimeflag == "1") {
              return "rm-alert";
          }
      },
      //默认值
      btnDefaultVal() {
          this.$refs.refhandexe.btnDefaultVal();
      },
      //执行
      btnHandExe() {
          let date = this.selrow.nextruntime;
          var curDate = new Date();
          var nextDate = new Date(date);
          if (nextDate > curDate) {
              this.$confirm("当前任务应该执行日期为：" + date + "(未到期)，您是否现在就要提前执行？", "提示", { confirmButtonText: "确定", cancelButtonText: "取消", type: "warning" })
                  .then(() => {
                      this.$refs.refhandexe.btnConfirm();
                  })
                  .catch(() => {
                      //取消
                  });
          } else {
              this.$refs.refhandexe.btnConfirm();
          }
      },
      handexeChange(scuflag, data) {
          // console.log("sss", scuflag, data);
          // if (scuflag == "success") {
          //     this.selrow.firstruntime = data[0].firstruntime;
          //     this.selrow.nextruntime = data[0].nextruntime;
          //     this.selrow.lastruntime = data[0].lastruntime;
          //     this.selrow.overtimeflag = "0";
          //     this.$pub.message(this, "计划已执行", "success");
          // }
          // setTimeout(() => {
          //     this.$refs.lxTable.setCurrentRow(this.selrow);
          // }, 10);
          // this.queryRight(this.selrow);
          this.btnQuery();
      },
  },
};
</Script>

<style scoped>
.top-deal {
  right: 5px;
  position: absolute;
  top: 37px;
  display: flex;
  align-items: center;
}

table {
  font-size: 12px;
  border-collapse: separate;
  border-spacing: 5px;
}
::v-deep .el-button.is-disabled {
  border: 0px;
  color: grey;
  background-color: #e6e6e6;
  font-weight: normal;
}
::v-deep tr.vxe-body--row.row-modify {
  color: blue !important;
}

::v-deep tr.vxe-body--row.row-new {
  color: #cc6600;
}
::v-deep.el-textarea__inner {
  display: block;
  resize: vertical;
  padding: 2px 4px;
}
</style>